<template>
    <!-- banner轮播 -->
  <div class="swiper-container" ref="myHeadSwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="carousel in ImageList" :key="carousel.id">
              <img class="imgList" :src="carousel.img_url" />
            </div>
          </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import { getSwipersApi } from "@/api/swiper";
export default {
  name: "mySwiper",
  data() {
    return {
        currentIndex:0,
        ImageList:[]
    };
  },
  methods:{
    async getSwipers(){
        const data = {pageSize:'',pageNum:''}
        await getSwipersApi(data).then(res=>{
            this.ImageList = res.data.swipers
        })
    }
  },
  //mouted配置方法
async mounted() {
    await this.getSwipers()
    
  },
   //watch
   watch: {
    ImageList: {
      // 立即监听,不管数据是否变化,立即执行一次,看情况使用
      immediate: true,
      deep:true,//深度监听,也是看情况使用
      handler(newValue, oldValue) {
        this.$nextTick(() => {
            var mySwiper = new Swiper(this.$refs.myHeadSwiper, {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay: {
                delay:4000,
                stopOnLastSlide:false,
                disableOnInteraction:true
            },
            
                effect : 'fade',
                fadeEffect: {
                    
                }
            });

        });
      },
    },
  }
};
</script>
  
<style lang="less" scoped>
.swiper-container{
    height: 17rem;
    .imgList{
      width: 100%;
    }
}
</style>